<template>
  <div id="header">
    <div class="header">
      <div class="img">
        <!-- todo logo -->
        <img src="http://imain.net/usr/uploads/2018/02/1254835428.png" width="100%" alt="">
      </div>

      <div class="search">
        <el-input
          size="medium"
          placeholder="请输入内容"
          suffix-icon="el-icon-search">
        </el-input>
      </div>
      <!--<ul>-->
        <!--<li><a href="#" class="check">首页</a></li>-->
        <!--<li><a href="#">图册</a></li>-->
        <!--<li><a href="#">关于</a></li>-->
        <!--<li><a href="#">关于</a></li>-->
        <!--<li><a href="#">关于</a></li>-->
      <!--</ul>-->

    </div>
  </div>
</template>

<script lang="ts">
  import {
    Component,
    Emit, Inject, Model,
    Prop, Provide, Vue, Watch
  } from 'vue-property-decorator'

  @Component
  export default class index extends Vue {
    name: "header";
  }
</script>

<style lang="scss" scoped>
  #header {
    position: fixed;
    z-index: 1000;
    top: 0;
    width: 100%;
    background: #020202;
    .header {
      .img {
        /*margin-left: 50px;*/
        display: inline-block;
        width: 100px;
      }
      /*overflow: auto;*/
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 1200px;
      height: 50px;
      margin: 0 auto;

      a {
        transition: all .5s;
      }

      ul {
        margin-left: 200px;
        display: inline-block;
        li {
          float: left;
          a {
            height: 66px;
            line-height: 66px;
            text-align: center;
            padding: 0 50px;
            display: inline-block;
            color: rgb(255, 255, 255);
            &:hover {
              color: rgba(255, 255, 255, .8);
            }
            &.check {
              color: #000;
              background: #fff;
            }
          }
        }
      }

      .search {
        margin-left: auto;
      }
    }
  }

</style>
